<template>
  <div class="body" @click="openFile()">
    <div class="file">
      <img class="file-type-icon" :src="fileSuffix" />
      <div class="file__content">
        <p class="file__content__name">{{ info.fileName }}</p>
        <p class="file__content__size">{{ fileSize }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Jindouyun from '../../../../utils/jindouyun'
import filesize from 'filesize'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  props: ['info', 'id'],
  computed: {
    fileSuffix: function () {
      const fileSuffix = this.info.fileName.split('.')[this.info.fileName.split('.').length - 1].toLowerCase()
      switch (fileSuffix) {
        case 'txt':
          return this.fileTypeIcons.txt
        case 'ppt':
          return this.fileTypeIcons.ppt
        case 'pdf':
          return this.fileTypeIcons.pdf
        case 'html':
          return this.fileTypeIcons.html
        case 'xlt':
        case 'xls':
        case 'xml':
        case 'xlsx':
        case 'xlsm':
        case 'xlsb':
        case 'xltx':
          return this.fileTypeIcons.excel
        case 'wav':
        case 'mp3':
          return this.fileTypeIcons.mp3
        case 'doc':
        case 'docx':
          return this.fileTypeIcons.word
        case 'zip':
          return this.fileTypeIcons.zip
        case 'mp4':
        case 'rmvb':
        case '3gp':
        case 'mov':
        case 'avi':
          return this.fileTypeIcons.video
        default:
          return this.fileTypeIcons.unknown
      }
    },
    fileSize: function () {
      return filesize(this.info.fileSize * 1)
    },
    fileUrl: function () {
      return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId + '' })
    }
  },
  data () {
    return {
      fileTypeIcons: {
        excel: require('../../../../assets/picture/fileTypeIcons/excel.png'),
        html: require('../../../../assets/picture/fileTypeIcons/html.png'),
        mp3: require('../../../../assets/picture/fileTypeIcons/mp3.png'),
        pdf: require('../../../../assets/picture/fileTypeIcons/pdf.png'),
        ppt: require('../../../../assets/picture/fileTypeIcons/ppt.png'),
        txt: require('../../../../assets/picture/fileTypeIcons/txt.png'),
        video: require('../../../../assets/picture/fileTypeIcons/video.png'),
        word: require('../../../../assets/picture/fileTypeIcons/word.png'),
        zip: require('../../../../assets/picture/fileTypeIcons/zip.png'),
        unknown: require('../../../../assets/picture/fileTypeIcons/unknown.png')
      }
    }
  },
  methods: {
    openFile () { // 打开文件
      if (this.info.isTemp) {
        window.open(this.info.tempUrl)
      } else {
        window.open(this.fileUrl)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  max-width: 250px;
  user-select: none;
  cursor: pointer;
  .file {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    background-color: white;
    border-radius: 7px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    min-width: 200px;
    img {
      margin-right: 5px;
    }
    .file-type-icon {
      height: 50px;
      width: 50px;
    }
    &__content {
      &__name {
        font-size: 14px;
        margin-bottom: 10px;
        white-space: nowrap;
        max-width: 160px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      &__size {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
